<template>
	<view class="mine-container">
		<view class="head-bg padding-lr">
			<view @click="getProfile" class="user-info flex align-center">
				<view class="avatar-container">
					<image class="round head-img" :src="wxAvatar ? wxAvatar : 'https://youke1.picui.cn/s1/2025/09/18/68cbfee8d1820.png'"
						mode="aspectFill">
					</image>
				</view>
				<view class="user-details flex flex-direction">
					<view class="username">{{ nickName ? nickName : '请登录' }}</view>
					<view class="user-id" v-if="userId">ID:{{ userId }}</view>
				</view>
				<view class="edit-icon">
					<u-icon name="edit-pen" color="#8389BE" size="20"></u-icon>
				</view>
			</view>
			
<!--			<view class="vip-section flex align-center justify-between">-->
<!--				<view class="vip-info">-->
<!--					<view class="vip-title">我的权益</view>-->
<!--					<view class="vip-desc">对话次数： 无限</view>-->
<!--				</view>-->
<!--				<button @click="rede" class="vip-button">兑换码</button>-->
<!--			</view>-->
		</view>
		
		<view class="mine-list padding-lr">
			<view @click="navTo('mycombolist')" class="list-item flex align-center">
				<view class="icon-container" style="background: rgba(112, 126, 255, 0.1);">
          <img :src="'https://youke1.picui.cn/s1/2025/09/18/68cbfeee81280.png'" mode=""></img>
<!--					<u-icon name="heart" color="#707EFF" size="24"></u-icon>-->
				</view>
				<view class="item-content flex align-center justify-between" @click="goToFavorite()">
          <view class="title">我的收藏</view>
					<u-icon name="arrow-right" color="#A0A7BA" size="18"></u-icon>
				</view>
			</view>
			
			<view @click="goToMastered()" class="list-item flex align-center" >
				<view class="icon-container" style="background: rgba(99, 233, 176, 0.1);">
          <img :src="'https://youke1.picui.cn/s1/2025/09/18/68cbfeed35e7c.png'" mode=""></img>
				</view>
				<view class="item-content flex align-center justify-between">
					<view class="title">已掌握</view>
					<u-icon name="arrow-right" color="#A0A7BA" size="18"></u-icon>
				</view>
			</view>
			
			<button open-type="feedback" class="list-item flex align-center">
				<view class="icon-container" style="background: rgba(255, 192, 70, 0.1);">
          <img :src="'https://youke1.picui.cn/s1/2025/09/18/68cbfeed965bd.png'" mode=""></img>
				</view>
				<view class="item-content flex align-center justify-between">
					<view class="title">帮助</view>
					<u-icon name="arrow-right" color="#A0A7BA" size="18"></u-icon>
				</view>
			</button>
		</view>
		
		<daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
	</view>
</template>

<script>
import config from '@/common/config.js';
	export default {
		data() {
			return {
				showContact: false,
				showDevNav: false,
				rede_code: '',
				loginCode: "",
				nickName: "",
				userId: "",
				wxAvatar: "",
				openId: "",
			};
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			console.log("userInfo====",userInfo)
			this.nickName = userInfo.nickName
			this.userId = userInfo.userId
			this.openId = userInfo.openid
			this.wxAvatar = userInfo.wxAvatar
		},
		methods: {
      goToFavorite() {
        uni.navigateTo({
          url: `/pages/favorite/index`
        })
        // 跳转到分类页面
      },
      goToMastered() {
        uni.navigateTo({
          url: `/pages/mastered/index`
        })
      },
      toVip() {
				uni.navigateTo({
					url: "/pages/vip/vip"
				})
			},
			navTo(id) {
				switch (id) {
					case "help":
						uni.navigateTo({
							url: '/pages/content/help'
						})
						break;
				}
			},
			showContactPop() {
				this.showContact ? this.showContact = false : this.showContact = true;
			},
			getProfile(e) {
				this.$refs.getUserProfile.open({
					desc: '授权登录',
					success: e => {
						console.log(e)
						// 更新用户信息
						this.$request('/system/user/edit/xcxUser', 'POST', {
							userId: this.userId,
							nickName: e.userInfo.nickName,
							wxAvatar: e.userInfo.avatarUrl,
							openId: this.openId
						}, {
							'content-type': 'application/json'
						}).then(res => {
							console.log('获取到信息了：')
							console.log(uni.getStorageSync('userInfo'))
							if (res.code == 200) {
								// 更新缓存
								uni.setStorageSync('userInfo', res.data)
								// 实时更新页面数据
								this.wxAvatar = res.data.wxAvatar
								this.nickName = res.data.nickName
								this.userId = res.data.userId
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			rede() {
				this.$refs.popup.open()
			},
			dialogInputConfirm(val) {
				if (!val) {
					uni.showModal({
						content: "请输入兑换码！"
					});
					return
				}
				uni.showLoading({
					title: '兑换中...'
				})
				this.$request('/api/Redemption/rede', 'POST', {
					code: val
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.$refs.inputClose.close()
						uni.hideLoading()
						uni.showModal({
							content: "已兑换成功"
						})
						this.rede_code = ""
						this.$store.commit('syncUserNum', res.data.num)
					} else {
						this.$refs.inputClose.close()
						uni.hideLoading()
						uni.showModal({
							content: res.status == 201 ? res.msg : '核销失败'
						})
					}
				})
			},
			logout() {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('token')
				this.$request("/login/logout", "Post").then((res) => {
					if (res.code == 200) {
						uni.reLaunch({
							url: "../index/home"
						})
					} else {
						this.$failToast('服务器繁忙，请稍后再试');
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.mine-container {
		min-height: 100vh;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjY3IiBoZWlnaHQ9IjkxOSIgdmlld0JveD0iMCAwIDEyNjcgOTE5Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgeDE9IjAuODUxMjA2NDgxNDU2NzU2NiIgeTE9IjAuOTI1NjAzMTUxMzIxNDExMSIgeDI9IjAuMzA2NjA3NDUxMjE3NTkwMzciIHkyPSIwLjc1NjY1OTIyODgyNTk1NjUiIGlkPSJtYXN0ZXJfc3ZnMF85XzAzNyI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0Y0RjVGQSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRjRGNUZBIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCB4MT0iMC44NTEyMDY0ODE0NTY3NTY2IiB5MT0iMC45MjU2MDMxNTEzMjE0MTExIiB4Mj0iLTEuMTg1MDY5MzcxNTY2MDg1OGUtOCIgeTI9IjAuMzYzMjA3NTE5MDU0NDEyOCIgaWQ9Im1hc3Rlcl9zdmcxXzlfMDQwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjRGNUZBIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE3ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmcyXzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE1ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmczXzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE1ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmc0XzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE3ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmc1XzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnPjxnPjxlbGxpcHNlIGN4PSI2MzMuNSIgY3k9IjQ1OS41IiByeD0iNjMzLjUiIHJ5PSI0NTkuNSIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnMF85XzAzNykiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE0MzApIj48ZWxsaXBzZSBjeD0iMzMzIiBjeT0iNzUwIiByeD0iMzUiIHJ5PSIzNSIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnMV85XzA0MCkiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE3MTQpIj48ZWxsaXBzZSBjeD0iNjA4LjUiIGN5PSI4ODEuNSIgcng9IjI0LjUiIHJ5PSIyNC41IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmcyXzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDAsMTc4MikiPjxlbGxpcHNlIGN4PSIxODUiIGN5PSI5MDgiIHJ4PSIxNyIgcnk9IjE3IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmczXzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDAsMTU0NikiPjxlbGxpcHNlIGN4PSIxMDMzIiBjeT0iNzkwIiByeD0iMTciIHJ5PSIxNyIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnNF85XzAzMykiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDEyOTApIj48ZWxsaXBzZSBjeD0iODgzLjUiIGN5PSI2NzkuNSIgcng9IjM0LjUiIHJ5PSIzNC41IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmc1XzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvZz48L3N2Zz4=");
    background-position-y: -300rpx;
    background-size: contain;
    background-position-x: 100rpx;
    background-repeat: no-repeat;
    background-color: #ffffff;

  }
	
	.head-bg {
		position: relative;
		padding: 30rpx;
		padding-top: calc(150rpx + var(--status-bar-height));
		border-radius: 0 0 40rpx 40rpx;
		background: linear-gradient(301deg, #F4F5FA 0%, rgba(244, 245, 250, 0) 54%);
		overflow: hidden;
    padding-bottom: 45px;

		.user-info {
			position: relative;
			z-index: 1;
			padding: 50rpx 60rpx;
			
			.avatar-container {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;
				background: #fafafa;
				margin-right: 40rpx;
				
				.head-img {
					width: 100%;
					height: 100%;
				}
			}
			
			.user-details {
				flex: 1;
				
				.username {
					font-size: 40rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 10rpx;
				}
				
				.user-id {
					font-size: 28rpx;
					color: #A0A7BA;
				}
			}
			
			.edit-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				//box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08);
			}
		}
		
		.vip-section {
			position: relative;
			z-index: 1;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			//box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.vip-info {
				.vip-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;
				}
				
				.vip-desc {
					font-size: 26rpx;
					color: #848B9E;
				}
			}
			
			.vip-button {
				padding: 15rpx 30rpx;
				background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #863f18;
				line-height: 1.2;
				border: none;
			}
		}
	}
	
	.mine-list {
		margin-top: -60rpx;
		position: relative;
		z-index: 2;
		padding: 0 30rpx;
		
		button {
			border: none;
			margin: 0;
			padding: 0;
			background-color: inherit;
			width: 100%;
		}
		
		button::after {
			border: none;
		}
		
		.list-item {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.icon-container {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
        img{
          width: 25px;
          height: 25px;
        }
			}
			
			.item-content {
				flex: 1;
				padding: 10rpx 0;
				
				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
</style>